<template>
  <div id="echartContainer7"></div>
</template>

<script>

  export default {
    name: 'component7',
    props: {
      advantageWords: {
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '福利关键词',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 0, 10]
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: '#3c3c3c'
            },
            backgroundColor: '#fff',
            borderColor: '#ddd',
            borderWidth: 1
          },
          series: [{
            name: '积分排行',
            type: 'wordCloud',
            gridSize: 20,
            sizeRange: [12, 50],
            rotationRange: [0, 0],
            shape: 'circle',
            autoSize: {
              enable: true,
              minSize: 18
            },
            textStyle: {
              normal: {
                color: function () {
                  return 'rgb(' + [
                    46,
                    Math.round(Math.random() * 34) + 80,
                    153
                  ].join(',') + ')';
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [{
              name: '夏震',
              value: 200,
            }, {
              name: '王若言',
              value: 181,
            }, {
              name: '朱英杰',
              value: 386,
            }, {
              name: '曹旺',
              value: 155,
            }, {
              name: '肖炜昱',
              value: 267,
            }, {
              name: '2020',
              value: 244,
            }, {
              name: 'Team 3',
              value: 898,

            }, {
              name: 'Java',
              value: 484,

            }, {
              name: 'Vue',
              value: 112,

            }, {
              name: 'Python',
              value: 465,

            }, {
              name: 'Scrapy',
              value: 447,

            }, {
              name: '拦截器',
              value: 582,

            }, {
              name: '动画效果',
              value: 555,

            }, {
              name: 'WebSocket',
              value: 550,

            }, {
              name: '2019',
              value: 462,
            }]
          }],
          animationEasing: 'elasticOut',
          animationDelayUpdate: function (idx) {
            return idx * 5 + 100;
          }
        }

      };
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer7'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);
        //axios异步获取数据
        // this.$axios
        //     .get('static/data/test.json')
        //     .then(res => {
        //         setTimeout(() => {
        //             // 获取到数据后隐藏加载动画
        //             myChart.hideLoading();
        //             console.log(res.data.da[0].cp);
        //             console.log(res.data);
        //             myChart.setOption({
        //                 xAxis: [
        //                     {
        //                         data: res.data.da[0].cp //将异步请求获取到的数据进行装载
        //                     }
        //                 ],
        //                 series: [
        //                     {
        //                         data: res.data.da[0].product
        //                     }
        //                 ]
        //             });
        //         }, 500); //加载动画时长为0.5秒
        //     })
        //     .catch(err => {
        //         console.log(err);
        //     });
      }
    },
    watch: {
      advantageWords: function () {
        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer7'));
        if (!this.advantageWords) {
          return false
        }
        console.info("AdvantageWords Changed");
        myChart.setOption({
          series: [{data: this.advantageWords}]
        });
      }
    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer7 {
    width: 100%;
    height: 100%;
  }
</style>
